<template>
    <div class="schema-code">
        <div class="schema-code-top">
            <span class="titie">表单(Schema)JSON</span>
            <div>
                <el-button type="text" @click="JSONformat" v-if="schema">
                    <span>{{format === 'array' ? '对象模式' : '数组模式'}}</span>
                </el-button>
                <el-button type="text" @click="copy">复制</el-button>
            </div>
        </div>
        <Vue2AceEditor ref="editor" v-model="editorContent" @init="editorInit" v-bind="editorConfig"></Vue2AceEditor>
    </div>
</template>

<script>
import Vue2AceEditor from 'vue2-ace-editor'
import { clone } from '@/utils/clone'
import { copyText } from '@/utils/dom'
export default {
    components: {
        Vue2AceEditor
    },
    props: {
        schema: Object
    },
    data() {
        return {
            editor: null,
            editorConfig: {
                lang: 'json',
                theme: 'chrome',
                height: 600
            },
            editorContent: '',
            format: 'array',
            baseSchema: null
        }
    },
    methods: {
        load() {
            this.baseSchema = clone(this.schema);
            this.format = Array.isArray(this.baseSchema.properties) ? 'array' : 'object';
            // for (const key in this.baseSchema.properties) {
            //     if (Array.isArray(this.baseSchema.properties[key].rules)) {
            //         delete this.baseSchema.properties[key].rules
            //     }
            // }
            this.editorContent = JSON.stringify(this.baseSchema, null, 2)
        },
        editorInit(editor) {
            this.editor = editor;
            require('brace/ext/language_tools')
            // 设置语言
            require('brace/mode/json')
            require('brace/snippets/json')
            // 设置主题
            require('brace/theme/monokai')
            require('brace/theme/chrome')
            require('brace/theme/crimson_editor')
            // 只读
            this.editor.setReadOnly(true);
            // 监听值的变化
            // editor.getSession().on('change', val => {
            //     console.log(editor.getValue());
            // })
        },
        // 数据模式
        JSONformat() {
            if (!this.baseSchema) return;
            const schema = clone(this.baseSchema);
            if (this.format === 'array') {
                if (Array.isArray(schema.properties)) {
                    schema.properties = schema.properties.reduce((t, p) => {
                        t[p.model] = p
                        return t
                    }, {})
                }
                this.format = 'object'
            } else {
                if (!Array.isArray(schema.properties)) {
                    const arr = [];
                    for (const key in schema.properties) {
                        arr.push(schema.properties[key])
                    }
                    schema.properties = arr
                }
                this.format = 'array'
            }
            this.editorContent = JSON.stringify(schema, null, 2)
        },
        // 拷贝
        copy() {
            const boo = copyText(this.editor.getValue())
            if (boo) {
                this.$message.success('复制成功')
            } else {
                this.$message.warning('复制失败，请手动选择复制')
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.schema-code{
    .schema-code-top{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
}
</style>
